<template>
  <div>
    <div style="padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #f2f3f8;">
      <el-button type="info" icon="el-icon-caret-left" @click="$router.go(-1)" size="mini">返回</el-button>
    </div>

    <el-form ref="FinanceEdit" size="small" :model="FinanceEditInfo" :rules="Finance">
      <el-row>
        <el-col :span="10">
          <el-form-item label="类型" prop="TypeID">
            <br>
            <el-select v-model="FinanceEditInfo.TypeID" placeholder="请选择" style="width:100%">
              <el-option v-for="item in options" :key="item.ID" :label="item.TypeName_CHS" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="Title">
            <el-input v-model="FinanceEditInfo.Title" placeholder="请输入你的标题"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="fk_Department">
            <el-select v-model="FinanceEditInfo.fk_Department" placeholder="请选择" style="width:100%">
              <el-option v-for="item in options3" :key="item.pk_Department" :label="item.DepartmentName"
                :value="item.pk_Department">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经手时间" prop="HandleDate">
            <br>
            <el-date-picker style="width:100%" v-model="FinanceEditInfo.HandleDate" value-format="yyyy/MM/dd"
              align="right" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="FinanceEditInfo.Description" type="textarea" :rows="7" placeholder="请输入内容">
            </el-input>
          </el-form-item>
          </el-form-item>
        </el-col>
        <el-col :span="4"><br></el-col>
        <el-col :span="10">
          <el-form-item label="状态" prop="StatusID">
            <br>
            <el-select v-model="FinanceEditInfo.StatusID" placeholder="请选择" style="width:100%">
              <el-option v-for="item in options1" :key="item.ID" :label="item.StatusName_CHS" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="金额" prop="Amount">
            <el-input v-model.number="FinanceEditInfo.Amount" placeholder="请输入你的金额"></el-input>
          </el-form-item>
          <el-form-item label="账户" prop="fk_Account">
            <el-select v-model="FinanceEditInfo.fk_Account" placeholder="请选择" style="width:100%">
              <el-option v-for="item in options4" :key="item.pk_Account" :label="item.AccountName"
                :value="item.pk_Account">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经手人" prop="HandleName">
            <el-input v-model="FinanceEditInfo.HandleName" placeholder="请输入你的经手人"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="FinanceEditInfo.Note" type="textarea" :rows="7" placeholder="请输入内容">
            </el-input>
          </el-form-item>
          <br>
        </el-col>
      </el-row>
      <div style="padding-top:10px;border-top:1px solid #f2f3f8;">
        <el-button type="primary" @click="submit('FinanceEdit')" icon="el-icon-check" size="small">保存</el-button>
        <el-button @click="$router.go(-1)" icon="el-icon-close" size="small">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [
      ],
      options1: [
      ],
      options3: [
      ],
      options4: [
      ],
      FinanceEditInfo: {
        fk_User: 1,
        TypeID: null,
        Title: null,
        fk_Department: null,
        HandleDate: null,
        StatusID: null,
        Amount: null,
        fk_Account: null,
        HandleName: null,
      },
      Type: 'Add',
      Finance: {
        TypeID: [
          { required: true, message: '请输入你的类型', trigger: 'blur' }
        ],
        Title: [
          { required: true, message: '请输入你的标题', trigger: 'blur' }
        ],
        fk_Department: [
          { required: true, message: '请输入你的部门', trigger: 'blur' }
        ],
        HandleDate: [
          { required: true, message: '请输入你的经手时间', trigger: 'blur' }
        ],
        StatusID: [
          { required: true, message: '请输入你的状态', trigger: 'blur' }
        ],
        Amount: [
          { required: true, message: '请输入你的金额', trigger: 'blur' },
          { type: 'integer', message: '只能输入正数', trigger: 'blur' }
        ],
        fk_Account: [
          { required: true, message: '请输入你的账户', trigger: 'blur' }
        ],
        HandleName: [
          { required: true, message: '请输入你的经手人', trigger: 'blur' }
        ],
      }
    }
  },
  //保存
  methods: {
    submit (Finance) {
      this.$refs[Finance].validate((valid) => {
        if (!valid) {
          return false;
        }
        //执行请求
        this.$axios({
          url: "/HrApi/Finance/UpdateFinancelinsList",
          method: "POST",
          data: this.$Qs.stringify({
            FinanceEditInfo: JSON.stringify(this.FinanceEditInfo),
            Type: this.Type,
            pk_User: this.$store.state.UserInfo.pk_User
          })
        }).then(res => {
          if (!res.data.code) {
            this.ListDt = res.data.data;
            this.$message.success(res.data.msg)
            if (this.Type === "Add") {
              this.$refs['FinanceEdit'].resetFields();
            }
          } else {
            this.$message.error(res.data.msg);
          }
        })
      })
    },
  },
  mounted () {
    this.$axios({
      url: '/HrApi/Finance/GetTypeList2',
      method: 'GET',
    }).then(res => {
      if (!res.data.code) {
        this.options = res.data.data;
      }
    }),
      this.$axios({
        url: '/HrApi/Finance/GetStatusList2',
        method: 'GET',
      }).then(res => {
        if (!res.data.code) {
          this.options1 = res.data.data;
        }
      }), this.$axios({
        url: '/HrApi/Finance/GetTypeList3',
        method: 'GET',
      }).then(res => {
        if (!res.data.code) {
          this.options3 = res.data.data;
        }
      })
    this.$axios({
      url: '/HrApi/Finance/GetStatusList3',
      method: 'GET',
    }).then(res => {
      if (!res.data.code) {
        this.options4 = res.data.data;
      }
    })
    //编辑
    if (Object.keys(this.$route.query).length) {
      this.Type = "Edit";
      this.$axios({
        url: '/HrApi/Finance/GetFinanceInfo',
        method: 'GET',
        params: {
          pk_Finance: this.$route.query["pk_Finance"]
        }
      }).then(res => {
        if (!res.data.code) {
          this.FinanceEditInfo = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>